<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="bootstrap/bootstrap.4.1.0.css">
    <script src="./bootstrap/jquery.3.2.1.min.js"></script>
    <script src="./bootstrap/popper.12.5.min.js"></script>
    <script src="./bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="./layui/layer/layer.js"></script>
    <script src="./vue/Vue.js"></script>
    <script src="./vue/axios.js"></script>
</head>
<body>
    <div id="app">
        <br>
        <br>
        <div>
            <span>种类名称：</span>
            <input type="text" :value="name">
        </div>
        <div>
            <input type="button" value="更新" @click = "updatePro()"  class="btn-default" style="display: block;margin: 0 auto">
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            typeId: null,
            name: "",
        },
        mounted:function() {
            this.typeId = window.location.href.split("=")[1];
            let data = {
                id: this.typeId
            }
            axios.post(
                "/product/type/queryWithId",
                data
            ).then(
                res => {
                    if(res.data.code===200){
                        let type = res.data.returnData;
                        this.name = type.name;
                    }else if(res.data.code===500){
                        layer.msg(res.data.message);
                    }
                }

            ).catch(response => {
                layer.alert("服务器忙，请稍后再试")
                console.log(response)
            })

        },

        methods: {
            initDefaultData:function() {
                this.name = "";
            },
            updatePro: function () {
                if (this.name === "") {
                    layer.msg("名称不能为空")
                    return;
                }
                let type = {
                    id: this.typeId,
                    name: this.name,
                }

                axios.post(
                    "/product/type/opr",
                    type
                ).then(
                    res => {
                        if(res.data.code===200){
                            this.initDefaultData();
                            layer.alert("更新成功", {
                                skin: 'layui-layer-molv',
                                closeBtn: 0,
                                anim: 1,
                                btn: ['好的'],
                                icon: 6,
                                yes :function () {
                                    parent.window.location.href = "oprType.html";
                                    parent.layer.closeAll();
                                }
                            })

                        }else if(res.data.code===500){
                            layer.msg(res.data.message);
                        }
                    }

                ).catch(response => {
                    layer.alert("服务器忙，请稍后再试")
                    console.log(response)
                })
            }
        }

    })
</script>
</html>